<template>
  <div class="tab">
    <header>
      <button @click=" flag='军事' ">军事</button>
      <button @click=" flag='新闻' ">新闻</button>
      <button @click=" flag='游戏' ">游戏</button>
    </header>
    <footer>
      <ul v-show=" flag=='军事' ">
        <li>J20</li>
        <li>003航母</li>
        <li>立陶宛</li>
        <li>轰20</li>
      </ul>
      <ul v-show=" flag=='游戏' ">
        <li>LOL</li>
        <li>王者荣耀</li>
        <li>CF</li>
        <li>DNF</li>
      </ul>
      <ul v-show=" flag=='新闻' ">
        <li>西安疫情</li>
        <li>薇娅13.14亿</li>
        <li>误杀2</li>
        <li>钢铁侠</li>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  name: "",
  data(){
    return {
      flag:"军事"
    }
  }
};
</script>

<style scoped lang="less">
   .tab{
     width: 400px;
     margin: 100px auto;
     header{
       width: 100%;
       height: 40px;
       display: flex;
       button{
         flex:1;
       }
     }
     footer{
       width: 100%;
       ul{
         list-style: none;
       }
     }
   }
</style>

